<template>
	<view>
		<view class="label-title" @click.stop="showShadow">
			<slot name="title">
				<view class="dropWrap">
					{{ labelTitle }}
					<image class="icon-image" :class="{open: showIf}" :src="labelIconSrc" mode="widthFix"/>
				</view>
			</slot>
		</view>
		<view class="dropdown">
			<view :class="showIf ? 'dropdown-mask' : 'undropdown-mask'" @click.stop="hideShadow"></view>
			<!-- <view class="ul" :style="showIf?'height:'+list.length*30+'px':''"> --> 
			<view class="ul" :style="'--i:'+list.length" :class="showIf?'show':''">  <!-- 不支持就用上面那种 -->
				<view v-for="(item, index) in list" :key="index" class="li" :class="{active: item.active}" @click.stop="handlerItem(item,index)">
					{{ item[nameKey] || item }}
					<image v-if="item.icon && item.active" class="icon-image" :src="moreIconSrc" mode="widthFix"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	/* !!!!!!! 注意  因源代码位于元素中，事件的冒泡机制会触发父级事件，代码中含有其他点击事件，会执行过去，所以需全部stop，有其他需求，自行copy */
	name: 'dropdown',
	props: {
		labelTitle: {
			type: String,
			default: '更多'
		},
		labelIconSrc: {
			type: String,
			default: 'https://pic.bangbangtongcheng.com/static/bottom-small-arrow.png'
		},
		moreIconSrc: {
			type: String,
			default: 'https://pic.bangbangtongcheng.com/static/more-active.png'
		},
		list: {
			type: Array,
			default: () => []
		},
		nameKey: {
			type: String,
			default: 'label'
		},
		clickStop: Boolean
	},
	data() {
		return {
			showIf: false
		};
	},
	methods: {
		handlerItem(value,index) {
			this.showIf = false;
			this.$emit('onClick', {value,index});
		},
		hideShadow() {
			this.showIf = false;
			this.$emit("labelTitleClick",this.showIf);
		},
		showShadow(event) {
			this.showIf = true;
			this.$emit("labelTitleClick",this.showIf);
		}
	}
};
</script>

<style scoped lang="less">
.dropWrap {
	box-sizing: border-box;
	width: 140rpx;
	height: 50rpx;
	background: #F5F7F9;
	border-radius: 6rpx;
	border: 2rpx solid #EBEBED;
	font-size: 24rpx;
	color: #666666;
	padding: 10rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.icon-image {
		width: 20rpx;
		height: 10rpx;
		transition: transform 0.3s;
		&.open {
			transform: rotate(180deg);
		}
	}
}
.dropdown {
	position: absolute;
	z-index: 100;
	.ul {
		width: 248rpx;
		position: relative;
		z-index: 101;
		list-style: none;
		background-color: #F5F7F9;
		border-radius: 6rpx;
		padding-left: 0;
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(24,97,93,0.1);
		transition: all 0.2s;
		height: 0;
		overflow: hidden;
		.li {
			box-sizing: border-box;
			color: #333;
			height: 70rpx;
			font-size: 28rpx;
			line-height: 24rpx;              //与下面的高度保持一致
			padding: 0 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			white-space: nowrap;
			&.active {
				background: #E7F5F4;
			}
			.icon-image {
				width: 28rpx;
				height: 28rpx;
				transform: translateX(90rpx);
				position: absolute;
			}
		}
	}
	.show {
		height: calc( var(--i) * 70rpx );   //与上面的高度保持一致
	}
	.dropdown-mask {
		top: 0;
		left: 0;
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		pointer-events: auto;
	}
	.undropdown-mask {
		pointer-events: none;
	}
}
</style>
